import React, { useEffect, useState, useRef } from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMarkdown } from "@fortawesome/free-brands-svg-icons";
import { faEdit, faTrash, faTimes } from "@fortawesome/free-solid-svg-icons";
import useKeyPress from "../hooks/useKeyPress";
import useContextMenu from "../hooks/useContextMenu";
import { getParentNode } from "../utils/helper";

const FileList = ({ files, onFileClick, onEditTitle, onFileDelete }) => {
  const [editId, setEditId] = useState(null);
  const [titleValue, setTitleValue] = useState("");
  const pressEsc = useKeyPress(27);
  const pressEnter = useKeyPress(13);
  const node = useRef(null);

  const cancelEdit = (item) => {
    setEditId(null);
    setTitleValue("");
    if (item.isNew) {
      onFileDelete(item.id);
    }
  };
  const clickedItem = useContextMenu(
    [
      {
        label: "打开",
        click: () => {
          const parentElement = getParentNode(clickedItem.current, "file-item");
          if (parentElement) {
            onFileClick(parentElement.dataset.id);
          }
        },
      },
      {
        label: "重命名",
        click: () => {
          const parentElement = getParentNode(clickedItem.current, "file-item");
          if (parentElement) {
            const { id, title } = parentElement.dataset;
            setEditId(id);
            setTitleValue(title);
          }
        },
      },
      {
        label: "删除",
        click: () => {
          const parentElement = getParentNode(clickedItem.current, "file-item");
          if (parentElement) {
            onFileDelete(parentElement.dataset.id);
          }
        },
      },
    ],
    ".file-list",
    [files]
  );

  useEffect(() => {
    const newFile = files.find((c) => c.isNew);
    if (newFile) {
      setEditId(newFile.id);
    }
  }, [files]);
  useEffect(() => {
    const editItem = files.find((c) => c.id === editId);
    if (editId && pressEsc) {
      cancelEdit(editItem);
    }
    if (editId && pressEnter && titleValue.trim() !== "") {
      onEditTitle(editId, titleValue, editItem.isNew);
      setEditId(null);
      setTitleValue("");
    }
  });
  useEffect(() => {
    if (editId) {
      node.current.focus();
    }
  }, [editId]);
  return (
    <ul className="list-group list-group-flush file-list">
      {files.map((c) => {
        return (
          <li
            key={c.id}
            data-id={c.id}
            data-title={c.title}
            className="list-group-item bg-light row d-flex align-items-center file-item mx-0"
          >
            {c.id === editId || c.isNew ? (
              <>
                <input
                  className="form-control col-10"
                  onChange={(e) => {
                    setTitleValue(e.target.value);
                  }}
                  value={titleValue}
                  ref={node}
                  placeholder="请输入文件名称"
                ></input>
                <button
                  type="button"
                  className="icon-btn col-2"
                  onClick={() => {
                    cancelEdit(c);
                  }}
                >
                  <FontAwesomeIcon title="取消" icon={faTimes} />
                </button>
              </>
            ) : (
              <>
                <span className="col-2">
                  <FontAwesomeIcon icon={faMarkdown} />
                </span>
                <span
                  className="col-6 c-link"
                  onClick={() => {
                    onFileClick(c.id);
                  }}
                >
                  {c.title}
                </span>
                <button
                  type="button"
                  className="icon-btn col-2"
                  onClick={() => {
                    setEditId(c.id);
                    setTitleValue(c.title);
                  }}
                >
                  <FontAwesomeIcon title="编辑" icon={faEdit} />
                </button>
                <button
                  type="button"
                  className="icon-btn col-2"
                  onClick={() => onFileDelete(c.id)}
                >
                  <FontAwesomeIcon title="删除" icon={faTrash} />
                </button>
              </>
            )}
          </li>
        );
      })}
    </ul>
  );
};

FileList.propTypes = {
  files: PropTypes.array.isRequired,
  onFileClick: PropTypes.func,
  onFileEdit: PropTypes.func,
  onFileDelete: PropTypes.func,
};

export default FileList;
